<!DOCTYPE html>
<html style = "height:100%">
    <head>
        <meta charset="utf-8" />
        <title>易吧，开创新的生活</title>
    </head>
    <link rel="stylesheet" href="css/main.css" type = "text/css">
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
	  <link rel="stylesheet" href="css/div.css" type="text/css">
	  <link rel="stylesheet" href="http://jrain.oscitas.netdna-cdn.com/tutorial/css/fontawesome-all.min.css" />
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquerysession.js"></script>
    <script src="js/bootstrap-paginator.min.js"></script>
    <script src="js/xs.js"></script>
  
    <body style = "height:100%">
        <nav class = "navbar nav_bar" role = "navigation">
            <div class="webset_info">
                <ul class="contact_phone">
                    <li class="phone_ego">
                        <i class="phone_icon"></i>
                        <span>CONTACT: XXX-XXXX-XXXX</span>
                    </li>
                    <li class="phone_append">不知道写啥，二手书今天半价？</li>
                </ul>
            </div>
            <!-- 导航栏样式 bootstrap 实现-->
            <div class = "container-fluid" style="margin-top: 20px;">
                <div class="navbar-header logo_container">
                    <a class="navbar-left" href="https://github.com/yanguojun123/YB" target="_blank">
                        <img class = "logo" alt="Brand" src="image/logo_main.png" height="20">
                    </a>
                </div>
                <div class="nav navbar-nav navbar-right loginandreg"  >
                    <a id="portrait" style="cursor: pointer"  >
                        <li>
                            <img src="../main_page/image/un_logged.png">
                        </li>
                        <p id="loginandreg_pos">登录</p>
                    </a>
                </div>
                <div class="nav navbar-nav navbar-right button_menu">
                    <ul class="nav navbar-nav buttons">
                        <li class="active"><a href="main.html">功能界面</a></li>
                        <li><a href="javascript:void(0);" onclick="jump()">个人主页</a></li>
                        <li><a href="#">关注我们</a></li>
                    </ul>
                </div>
            </div>
        </nav>            
        <div class = "input-group col-md-3 search_box">
            <!-- 搜索框 -->
            <input type = "text" class="search_input" value="请输入想要查询的内容" onfocus="this.value = '';" onblur="if(this.value == ''){this.value = '请输入想要查询的内容';}" style="outline: none;">
            <input type="submit" class="search_btn" value="搜索">
        </div>
        <div class = "main">
            <div class = "container-fluid contain">
                <!-- 容器，用于承载所有需要显示的元件 -->
                <div class="row main_disp_below">
                    <!-- 主窗体 -->
                    <div class="main_disp_header">
                        
                    </div>
                    <div class = "main_disp">
                        <!-- 界面显示的主体，分为左中右三个 -->
                        <div class = "col-md-2 left_select_panel">
                            <!-- 
                                左边的导航栏，用于显示二手书和失物招领
                            -->
                            <!--
                                左边，这里采用模板的样式，尽量与背景和主体契合，不要选择太深的颜色和太扁平化的侧边栏
                            -->
                            <h3 class="bookClassHeader">二手书相关信息</h3>
                            <ul class="bookCatogries">
                                <li><a id="b1" href="main.html">购买二手书</a></li>
                                <li><a id="b2" href="mainadd.html">发布二手书</a></li>
                                <li><a id="b3" href="mainsearch.html">搜索二手书</a></li>
                            </ul>
                            <h3 class="swapClassHeader">失物招领信息</h3>
                            <ul class="swapCatogries">
                                <li><a id="s1" href="ShiWuZhaoling.html?lost_or_pick=lost" >失物信息</a></li>
                                <li><a id="s2" href="ShiWuZhaoling.html?lost_or_pick=pick" >招领信息</a></li>
                                <li><a id="s3" href="AddXinxi.html">免费发布信息</a></li>
                                <li><a id="s4" href="Search.html">搜索信息</a></li>
                            </ul>
                            <div class="moreInfo">
                            </div>
                        </div>
                        <div class = "col-md-7 mid_main_panel">
                            <!-- 
                                中间的显示，内容根据左边的选择进行变动
                            -->
                            <!-- 中间，我觉得左右两边的夹缝可以再窄一点，这里的 height 被重新设置为400，之后填充时取消 -->
							<div id="content" class="content">
<!--
								<div class="subcontent">
									<div class="subcon_photo">
										<a href="#">
                        <img onclick="view(this)" src="image/book_test/童年.png">
                    </a>
-->
<!--
                    <ul class='social'>
                      <li title='收藏'><a href='#' data-tip='Add to Cart'  onclick='addtocart(this)'><i class='fas fa-shopping-cart'></i></a></li>
                      <li><a href='#' data-tip='Wishlist'  onclick='purchase(this)'><i class='far fa-heart'></i></a></li>
                      <li><a href='#' data-tip='Quick View'  onclick='view(this)'><i class='fas fa-search'></i></a></li>
                    </ul>
-->
<!--
									</div>
									<div title="童年" class="subcon_name"><a href="#">童年</a></div>
									<div title="高尔基" class="subcon_author">高尔基</div>
									<div class="subcon_price">￥20</div>
									<div class="subcon_seller"><a href="#">kaim</a></div>
                  <span style='opacity:0.0;'>1</span>
								</div>
-->

								

							</div>
							<div id="page" style="margin-left:15%;height:20%;float:left">
<!--							<ul class="pagination"></ul>-->
								<ul id="example"></ul>	
							</div>
              <div id="pageinput"><input type="text" id="pinput" autofocus class="form-control"></div>
              <div id="pagebutton"><button id="pbutton"type="button" class="btn btn-info btn-sm">go</button></div>       
                      
                        </div>
                        <div class = "col-md-3 right_info_panel">
                          
                          <h2 class="rightheader">热度最高</h2>
                          <ul id="heat">
                            <li><span id="right1"></span><a>三体</a></li>
                          </ul>

                            <!--  
                            右边的显示，内容根据左边的选择进行变动；
                            当左侧选择的是二手书相关，右侧显示最火热的二手书；
                            当左侧选择的是失物招领相关，右侧显示（不知道显示什么，说不定可以关掉？估计关掉很难看）
                            -->
                        </div> 
                    </div>
                </div>
            </div>
        </div>
        <div class = "foot">
            <!-- 角注，呈现版权信息、公司团队信息等 -->
            <div class="container-fluid foot_container">
                <div class="footer-grid foot_panel_1 shrink">
                    <h3>完全不知道应该写什么</h3>
                    <ul class="foot_list">
                        <li><a href="#">项目一</a></li>
                        <li><a href="#">项目二</a></li>
                        <li><a href="#">项目三</a></li>
                        <li><a href="#">项目四</a></li>
                    </ul>
                </div>
                <div class="footer-grid foot_panel_2 shrink">
                    <h3>第二栏的标题</h3>
                    <ul class="foot_list">
                        <li><a href="#">项目一</a></li>
                        <li><a href="#">项目二</a></li>
                        <li><a href="#">项目三</a></li>
                        <li><a href="#">项目四</a></li>
                    </ul>
                </div>
                <div class="footer-grid foot_panel_3 shrink">
                    <h3>第三栏的标题</h3>
                    <ul class="foot_list">
                        <li><a href="#">项目一</a></li>
                        <li><a href="#">项目二</a></li>
                        <li><a href="#">项目三</a></li>
                        <li><a href="#">项目四</a></li>
                        <li><a href="#">项目五</a></li>
                    </ul>
                </div>
                <div class="footer-grid foot_panel_4 shrink">
                    <h3>第四栏的标题</h3>
                    <ul class="foot_list">
                        <li><a href="#">项目一</a></li>
                        <li><a href="#">项目二</a></li>
                    </ul>
                </div>
                <div class="footer-grid foot_panel_5 shrink">
                    <h3>第五栏的标题</h3>
                    <ul class="foot_list">
                        <li><a href="#">项目一</a></li>
                        <li><a href="#">项目二</a></li>
                        <li><a href="#">项目三</a></li>
                    </ul>
                </div>
            </div>
            <div class="foot_license">
                Copyright © 2019.Company name All rights reserved.More Templates 模板之家 - Collect from 网页模板(没错我故意的，嘿嘿)
            </div>
        </div>
        
        <div id="login_window">
            <div id="login_window_container">
                <div class="login_input">
                    <input type="text" id="logInput1" onfocus="this.value='';" onblur="inputInfo1(this.id)" name="account" value="account">
                </div>
                <div class="login_input">
                    <input type="password" id="logInput2" 
                    onfocus="this.value='';" onblur="inputInfo2(this.id)" 
                    name="passwd" value="password">
                </div>
                <div id="btns">
                    <button onclick="login()">Login</button>
                    <button onclick="registerBTN()">Register</button>
                </div>
            </div>
        </div>
        <div id="grayBackground">

        </div>
        <div id="register_window">
            <div id="register_window_container">
                <!-- 这里的东西就多了，先写着吧 -->
                <div id="registerHeader">
                    <h2>新用户注册</h2>
                </div>
                <div id="regisSpan">
                    <h4>您的注册 ID 为: <span id="registerID">--------</span></h4>
                </div>
                <div id="registerInputs">
                    <div id="regisNickname">
                        <input type="text" placeholder="请输入您的昵称">
                    </div>
                    <div id="regisEmail">
                        <input type="text" placeholder="请输入注册邮箱" onblur="verifyEmail(this)">
                    </div>
                    <div id="regisPasswd">
                        <input type="password" placeholder="请输入密码" onblur="verifyPasswd(this)">
                    </div>
                    <div id="regisPasswdAgain">
                        <input type="password" placeholder="请再次确认密码">
                    </div>
                </div>
                <div id="registerButtons">
                    <button onclick="register()">注册</button>
                    <button onclick="register_cancel()">取消</button>
                </div>
            </div>
        </div>

    </body>
<script>
//      for(let i=0;i<5;i++){
//        //<img onclick="view(this)" src="image/book_test/童年.png">
//        $("#content").append(" <div class='subcontent'><div class='subcon_photo'><img onclick='view(this)' src='image/book_test/童年.png'></div><div title='e' class='subcon_name'><a href='#'>e</a></div><div title='e+' class='subcon_author'>e</div><div class='subcon_price'>￥e</div><div class='subcon_seller'><a href='#'>kaim</a></div><span style='opacity:0.0;'>e</span></div>");
//      }
var total=-1;//初始测试总页数
var bookss=[];
//分页参数设置函数
 function setoptions(totalpages,currentpage){
      var options={
        bootstrapMajorVersion:3,
        currentPage: currentpage,
        totalPages: totalpages,
        numberOfPages: 5,
        shouldShowPage:function(type, page, current){
            switch (type) {
                case "first":
                    return true;
                case "prev":
                    return true;
                case "next":
                    return true;
                case "last":
                    return true;
                case "page":
                    return true;
            }
        },
        tooltipTitles: function(type, page, current) {//设置操作按钮的title属性。
            switch (type) {
                case "first":
                    return "首页";
                case "prev":
                    return "上一页";
                case "next":
                    return "下一页";
                case "last":
                    return "末页";
                case "page":
                    return page;
            }
        },
        itemTexts : function(type, page, current) {//控制每个操作按钮的显示文字。
            switch (type) {
                case "first":
                    return "首页";
                case "prev":
                    return "上一页";
                case "next":
                    return "下一页";
                case "last":
                    return "末页";
                case "page":
                    return page;
            }
        },
        onPageChanged: function (event, oldPage, newPage){
          middleget(newPage);

        }
    };
    return options;
}
//从数据库异步获取最新热度的内容展示到右侧面板
function rightget(){
  $("#heat").empty();
  $.ajax({
     type: "POST",
     url: "Server/get_most_popular_book.php",
     //data: {"userId": account, "password": password, "purpose":0},
     dataType: "text",
     success: function(data)
     {   //返回值
         var obj = JSON.parse(data);
         if(obj.state){
           for(let i=0;i<5;i++){
              //console.log(obj[i].bookname);
              $("#heat").append("<li id='right"+i+"'><span><a>"+obj[i].bookname+"</a></span></li>");
              $("#right"+i+"").xs999(Math.round(Math.random()*30+1));
              $("#right"+i+"").hover(function(){
                $(this).children().children().css({"font-size":"28px","color":"#2bae85","transition":"0.2s"});
              },function(){
                $(this).children().children().css({"font-size":"18px","color":"#ffffff"});
              });
              $("#right"+i+"").click(function(){
                alert($(this).children().children().text())
              });
           }
         }
         else{
           alert("右侧最热查询失败")
         }
         

     },
     error: function(jqXHR,textStatus,errorThrown)
     {
         console.log(jqXHR);
         console.log(textStatus);
         console.log(errorThrown)
     }
 })
//  for(let i=0;i<6;i++){
//    $("#heat").append("<li id='right"+i+"'><span><a>信"+i+"</a></span></li>");
//    $("#right"+i+"").xs999(Math.round(Math.random()*30));
//    $("#right"+i+"").hover(function(){
//      $(this).children().children().css({"font-size":"28px","color":"#2bae85","transition":"0.2s"});
//    },function(){
//      $(this).children().children().css({"font-size":"18px","color":"#ffffff"});
//    });
//    $("#right"+i+"").click(function(){
//      alert($(this).children().children().text())
//    });
//  }

  
}	 
//从数据库异步获取最新热度的内容展示到右侧面板
function middleget(page){
  //console.log("page",page);
  $.ajax({
    url: "Server/Controller/control.php",
    type: 'post',
    data: {"page": parseInt(page),"code":1},
    dataType: 'json',
    success: function (data) {
     //tplData(data);//处理成功返回的数据
      //传过来一页的数据，总页数
      //如果总页数不变则不调用setpages
      //否则调用setpages
      //console.log("data",data);   
      
      
      let books=data.table;
      bookss=books;
      console.log("books",books)
      $("#content").empty();
      for(let i=0;i<books.length;i++){
        //<img onclick="view(this)" src="image/book_test/童年.png">
        $("#content").append(" <div class='subcontent'><div class='subcon_photo'><img onclick='view(this)' src='image/book_test/童年.png'></div><div title='"+books[i].bookName+"' class='subcon_name'><a href='#'>"+books[i].bookName+"</a></div><div title='"+books[i].author+"+' class='subcon_author'>"+books[i].author+"</div><div class='subcon_price'>￥"+books[i].price+"</div><div class='subcon_seller'><a href='#'>kaim</a></div><span style='opacity:0.0;'>"+i+"</span></div>");
      }
      
      if(total==-1||data.number!=total){
        total=data.number;
        $("#example").bootstrapPaginator(setoptions(total,page)); 
      }
        

      

   }
  });

  
}

function jump(){
  console.log("hh");
  var user=$.session.get("user");
  user=JSON.parse(user);
  //console.log(user.userId)
  window.location.href=("../personal_page/chat_html/Personal_index.html?userid="+user.userId);
}
//查看按钮点击事件函数
function view(t){
  var p = t.parentNode.parentNode.children[5]; 
  var q = p.innerHTML;
  
  $.ajax({
    type: "POST",
    url: "Server/increase_popularity.php",
    data: {"bookId": bookss[q].bookId},
    dataType: "text",
    success: function(data)
    {   //返回值
       if(data){
          // 存储值：将对象转换为Json字符串
          //sessionStorage.setItem('testKey', JSON.stringify(bookss[q]));
          //console.log("1",tuser)
          sessionStorage.setItem('testKey', bookss[q].bookId);
          window.location.href="stuffmessage.html";    
       }

    },
    error: function(jqXHR,textStatus,errorThrown)
    {
       console.log(jqXHR);
       console.log(textStatus);
       console.log(errorThrown)
    }
  })

}  
function setpage(){
    middleget(1);
    
    $("#pbutton").click(function(){
      let page=$("#pinput").val();
      let reg=/^[0-9]*$/;
      if(page){
        //如果获取到了非空
        if(reg.test(page)){
          if(page>total)
            alert("页数过大")
          else
            $('#example').bootstrapPaginator("show",page)// 调用show命令
        }
        else
          alert("输入不合法")
      }
      else
        alert("你没有输入")
      $("#pinput").val("");

    })
}

  for(let i=1;i<=3;i++)
    $("#b"+i).css({"font-size":"10px","color":"black"});
  for(let i=1;i<=4;i++)
    $("#s"+i).css({"font-size":"10px","color":"black"});
  $("#b1").css({"font-size":"20px","color":"red"});
  
  rightget();
  setpage();





  
</script>

<script src="js/main.js"></script>

</html>
